<template>
  <div class="mcont">
      
 

    <!-- <el-input placeholder="请输入内容" v-model="title" class="input-with-select">
    <el-button slot="append" icon="el-icon-search" @click="findother"></el-button> -->
  <!--</el-input>  --> 


      <el-timeline>
          
        <el-timeline-item :timestamp="blog.created" placement="top" v-for="(blog,key) in blogs" :key=key> 
          <!--  <router-link :to="{name:'tickmsg',params:{blogId:blog.id}}">--><!-- {blogId:blog.id}/-->

          <el-card>
            <h2>收货信息  <router-link :to="{name:'EditAdd',params:{blogId:blog.id}}">
                <i class="el-icon-edit">修改</i> 
                </router-link></h2> 
                
              <img style="width: 50px; height: 50px" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
            <h4>
                
                 姓名:{{blog.realname}}
                
            </h4>
            <br>
            <p>  收货地址:{{blog.address}}</p>
            <br>
             <p>  手机号:{{blog.phone}}</p>
             <br>
             <p>  身份证:{{blog.idcard}}</p>
             <br>
            <div  style="float:right;"> 
              
            </div>
            
          </el-card>

       
        </el-timeline-item>
      </el-timeline>

         <div class="block" > <div style="text-align:center "  ><router-link :to="{name:'EditAdd'}"><el-button  @click="createadd" icon="el-icon-circle-plus-outline" circle ></el-button>添加信息</router-link></div></div>

      

      <el-pagination class="mpage" background layout="prev, pager, next" 
      :current-page="currentpage" 
      :page-size="pageSize" 
      :total="total"
      @current-change=page
       v-if="!addressinput">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "Blogs.vue",
  components: { Header },
  data() {
    return {
      blogs: {},
      activeName: "1",
      currentpage: 1,
      total: 0,
      title: "123",
      pageSize: 5,
      input3: "",
      addressinput: false,
    };
  },
  methods: {
    page(currentpage) {
      const _this = this;
      if (!JSON.parse(sessionStorage.getItem("userInfo")).id) {
        console.log("+++++++++++++++++++++++++++++++++");
        this.$notify({
          title: "请先登录！",
          message: "登录后查询",
          duration: 1500,
        });
      } else {
        _this.$axios
          .get(`/address/${JSON.parse(sessionStorage.getItem("userInfo")).id}/?currentpage=`+currentpage)
          .then((res) => {
            //     console.log('currentpagemessage:')
            //   console.log(res)
            console.log("执行");
            console.log("返回内容:", res);
            console.log(res.data.data.records.length);
            _this.blogs = res.data.data.records;
            _this.currentpage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;

            if (res.data.data.records.length == 0) {
              _this.addressinput = true;
              console.log("_this.addressinput" + _this.addressinput);
            }
          });
      }
    },
    // test(){
    //   const _this = this
    //   // console.log(JSON.parse(sessionStorage.getItem("userInfo")).id)
    //   _this.$axios.get(`/tick/buy/1/${JSON.parse(sessionStorage.getItem("userInfo")).id}`).then(res => {
    //     console.log('res',res)
    //   })
    // },
    findother(currentpage) {
      const _this = this;
      console.log("111111111111111111111111111" + this.title + "end"); //获取输入框的信息

      _this.$axios.get("/ticksByName?title=" + this.title).then((res) => {
        console.log("currentpagemessage:");
        console.log(res);
        _this.blogs = res.data.data.records;
        _this.currentpage = res.data.data.current;
        _this.total = res.data.data.total;
        _this.pageSize = res.data.data.size;
      });
    },
    createadd() {
      console.log("跳去创建");
    },
  },
  created() {
    console.log(this.page);
    this.page(1);
  },
};
</script>
<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
</style>